<style type="text/css">
    .click-phone:hover {
        background-color: lightskyblue;
    }
</style>
<input hidden="hidden" id="navValue" value="股东列表">
<div class="page-content">
    <div class="page-header">
        <h1>
            牡丹荟管理
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                添加牡丹荟成员
            </small>
        </h1>
    </div><!-- /.page-header -->

    <div class="row" style="text-align: center">
        <div style="width: 50vw;">
            <div style="height: 50vh;width: 150px;float: left;margin-left:100px;border: 1px solid lightgrey;">
                <span>手机号</span>
                <textarea id="searchPhone" name="searchPhone" style="width: 100%;height: 85%">

                </textarea>
                <button class="btn btn-info" onclick="searchList();" type="button">搜索</button>
            </div>
            <div style="height: 50vh;width:400px;overflow-y:scroll;padding-left: 20px;border: 1px solid lightgrey;">
                <form action="{:url('insertPeony')}" method="get" onsubmit="return check();">
                    <table style="padding: 10px">
                        <thead style="border-bottom: 2px solid cornflowerblue">
                        <td style="width: 80px">名称</td>
                        <td style="width: 80px">昵称</td>
                        <td style="width: 150px">账号</td>
                        <td></td>
                        </thead>
                        <tbody id="content">

                        </tbody>
                    </table>

            </div>
            <div class="row header smaller lighter purple" style="text-align: center;">
                <p>
                    <button class="btn btn-light">取消</button>
                    <button class="btn btn-success" >确定加入</button>
                </p>
            </div>
            </form>
        </div><!-- /.row -->
    </div>
    <div class="row" id="tips1" style="display: none">
        <div style="border: 1px solid lightgrey;float: left;margin-left:100px;">
            <table style="padding: 10px">
                <thead style="border-bottom: 2px solid cornflowerblue">
                <td style="width: 150px">账号</td>
                <td>备注</td>
                </thead>
                <tbody id="content1">

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>

    function check(){
        var content = $('#content').html();
        content = $.trim(content);
        if(content){
            return true;
        }else{
            return false;
        }
    }
    function searchList(){
        var searchPhone = $('#searchPhone').val();

        $.ajax({
            url: '{:url("searchPhone")}',
            type: 'get',
            data: {phone: searchPhone},
            dataType: 'json',
            success: function (e) {
                console.log(e);
                if(e.tag){
                    $('#content').empty();
                    var shareholderList = e.shareholders;
                    for (var i = 0;i< shareholderList.length;i++){
                        var html = '<tr id="' + shareholderList[i].phone + '"><td>' + shareholderList[i].realname + '</td><td>' + shareholderList[i].nickname + '</td><td>' + shareholderList[i].phone + '</td><td><i class="ace-icon glyphicon glyphicon-remove" style="color: red" onclick="deleteE(' + shareholderList[i].phone + ');"></i><input type="hidden" name="addPhone[]" value="' + shareholderList[i].phone + '"></td></tr>';
                        $("#content").append(html);
                    }

                    $('#content1').empty();
                    var failList = e.fail;
                    if(failList.length > 0){
                        $('#tips1').show();
                    }
                    for (var i = 0;i< failList.length;i++){
                        var html1 = '<tr id="' + failList[i].phone + '"><td>' + failList[i].phone + '</td><td>' + failList[i].content + '</td></tr>';
                        $("#content1").append(html1);
                    }
                }
            }
        });
    }

    function addPeony(realname, nickname, phone) {
        var html = '<tr id="' + phone + '"><td>' + realname + '</td><td>' + nickname + '</td><td>' + phone + '</td><td><i class="ace-icon glyphicon glyphicon-remove" style="color: red" onclick="deleteE(' + phone + ');"></i><input type="hidden" name="addPhone[]" value="' + phone + '"></td></tr>';
        $("#content").append(html);
    }

    function deleteE(phone) {
        $("#" + phone).remove();
    }


</script>

